<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Create Event</title>
    </h:head>
    <h:body>
        <ui:composition template="./templateuser.xhtml">
            <ui:define name="center">
                
                <h:form>   
                    
                <h:panelGrid columnClasses="value">
                    
                    <p:toolbar>
                        <p:toolbarGroup align="right">
                            <p:commandButton value="Back" action="userprofile?faces-redirect=true" />
                        </p:toolbarGroup>
                        <p:toolbarGroup align="left" style="padding-top: 10px;padding-left: 10px">
                            <p:outputLabel value="#{userCalendarBean.username}'s calendar" />
                        </p:toolbarGroup>
                    </p:toolbar>
                    <p:schedule id="schedule" value="#{userCalendarBean.eventModel}" widgetVar="myschedule" timeZone="GMT+1" draggable="false" resizable="false">

                        <p:ajax event="eventSelect" listener="#{userCalendarBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                        
                    </p:schedule>

                </h:panelGrid>
 
                <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip"  >
                    <h:panelGrid id="eventDetails" columns="2">
                        <h:outputLabel for="name" value="Name:" />
                        <p:outputLabel id="name" value="#{userCalendarBean.event.title}" />

                        <h:outputLabel for="date" value="Date:" />
                        <p:outputLabel id="date" value="#{userCalendarBean.event.startDate}" >
                            <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+1"/>
                        </p:outputLabel>

                        <h:outputLabel for="from" value="From:" />
                        <p:outputLabel id="from" value="#{userCalendarBean.event.startDate}" >
                            <f:convertDateTime pattern="hh:mm" timeZone="GMT+1"/>
                        </p:outputLabel>
                        
                        <h:outputLabel for="to" value="To:" />
                        <p:outputLabel id="to" value="#{userCalendarBean.event.endDate}" >
                            <f:convertDateTime pattern="hh:mm" timeZone="GMT+1"/>
                        </p:outputLabel>
                        
                        <h:outputLabel for="address" value="Address:" rendered="#{!userCalendarBean.event.title.equals('Busy Time Slot')}" />
                        <p:outputLabel id="address" value="#{userCalendarBean.event.data.place.address}" >
                        </p:outputLabel>
                        
                        <h:outputLabel for="city" value="City:" rendered="#{!userCalendarBean.event.title.equals('Busy Time Slot')}" />
                        <p:outputLabel id="city" value="#{userCalendarBean.event.data.place.city.name}" >
                        </p:outputLabel>
                        
                        <h:outputLabel value="Weather:" rendered="#{!userCalendarBean.event.title.equals('Busy Time Slot') and userCalendarBean.type.equals('Outdoor')}"/>
                        <p:graphicImage value="#{userCalendarBean.weatherForecast}" rendered="#{userCalendarBean.type.equals('Outdoor')}"/>
                        
                    </h:panelGrid>
                </p:dialog>
                
                </h:form>
   
                
                <style type="text/css">
                    .value {
                        width: 1000px;
                    }
                </style>
                
            </ui:define>
        </ui:composition>
    </h:body>
</html>
